<template lang="html">
  <div class="">
    <div class="box">
      <div class="input">
          <p>
              <label>物流单号：</label>
              <el-input placeholder="请输入订单号"  ref="el-input" class="el-input" @change="search" v-model="searchData"></el-input>&nbsp;&nbsp;
          </p>
          <p><el-button type="primary" class="se" style="margin-left:10px;" @click="searchs">搜索</el-button></p>
      </div>
    </div>
    <div class="btn" v-show="btnst == '1'">
      <el-button v-if="btnText && btnText != '待收货'" type="primary" class="se" style="margin-left:10px;">{{btnText}}</el-button>
      <el-button  v-if="btnText != '待收货' && btnText" type="success" class="se" style="margin-left:10px;"  @click="addloginfo">打印二维码</el-button>
    </div>
    <div v-show="btnst == '2'" class="btn">
        <el-button v-show="yesNo == 'N'" type="primary" @click="confirmtake">确定收货</el-button>
        <el-button v-show="yesNo == 'Y'" type="primary">已收货</el-button>
        <el-button v-show="codeStatus == 'Y'" type="success" class="se" style="margin-left:10px;" @click="addloginfo">打印二维码</el-button>
    </div>
    <div v-show="btnst == '3'" class="btn">
        <el-button v-show="yesNo == 'N'" type="primary" @click="confirmtake">确定收货</el-button>
        <el-button v-show="yesNo == 'Y'" type="primary">已收货</el-button>
    </div>
    <div v-if="state == 3">
      <afterDetail :item='dataList' btn='1'></afterDetail>
    </div>
    <div v-show="state == 1">
      <OrderDetail
        ref="testView"
         v-loading="loading"
          :orderId='orderId'
          @orderStatus="Status"
          :take="true"
          :id="id"
          :logisticsType="logisticsType">
      </OrderDetail>
    </div>
    <div v-show="state == 2">
        <tableVue :list="list" :state="false" :pagination="true">
        </tableVue>
    </div>
    <el-dialog
      title="提示"
      :visible="dialogVisible"
      width="30%">
      <div class="imgbox">
        <img :src="src" alt="">
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="printQR">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
    import OrderDetail from '@/components/orderDetail.vue'
    import afterDetail from '@/views/shoppingCentre/indentCenter/afterAdmin/details/details.vue'
    import tableVue from '@/components/alltable.vue'
    import {
        LogisticsCargoInfo
    } from '@/api/appraiserAdmin/appraiserAdmin'
    import {
      confirmdelivery,
      logInfo
    } from '@/api/warehouse/index'
     import {
      LPAPIWeb
    } from '../../../../static/QRcode.js'
  export default {
    components:{
        OrderDetail,
        tableVue,
        afterDetail
    },
    data () {
      return {
        codeStatus : '',
        searchData : '',
        states : '',
        state : 9,
        src: '',
        btnst: '',
        dialogVisible : false,
        orderId :'',
        logisticsType : '',
        categoryNameAndProductName :'',
        btnText : '',
        loading :false,
        api:'',
        yesNo :'',
        temp : [],
        dataList :'',
        id :'',
        list : {
          thead : [
            {label:'商品名称',prop:"productTitle",rowspan:1},
            {label:'是否奢侈品',prop:"isLuxuries",rowspan:1},
            {label:'是否手机',prop:"isMobile",rowspan:1},
            {label:'是否热门',prop:"isHot",rowspan:1},
            {label:'寄卖方式',prop:"consignType",rowspan:1},
          ],
          tbody : []
        },
      }
    },
    mounted(){
       this.$refs['el-input'].focus();
       this.api = new LPAPIWeb()
    },
    methods : {
        Status (val) {
            this.btnText = val
        },
        printQR(){
            this.dialogVisible = false;
            this.printImage()
        },
        updatePrinterList(){ //更新打印机列表。
            var printers = this.api.getPrinters();
            if (printers instanceof Array && printers.length > 0 &&printers[0].name !="") {
                this.dialogVisible = true;
            } else {
                this.$message.error("未检测到打印机");
            }
        },
        printImage(){//打印图片
        if (!this.openPrinter())
                return;
            var width = 50;
            var height = 70;
            var url = this.src
            var margin = 5;
            if (!this.api.startJob({width : width, height : height}))
                return false;
            this.api.drawImage({
                imageFile: url,
                x: margin,
                y: margin-5,
                width: width - margin * 2,
                height: height - margin * 2
            });
            return this.api.commitJob();
        },
        openPrinter(){  /** * 打开当前打印机； */
            var printerElement = this.api.getPrinters();
            if (printerElement.length==0){
                return false;
            }
            var arr = printerElement[0];
            var name = arr.name;
            var ip = arr.ip;

            return this.api.openPrinter({ip: ip, printerName: name});


        },
        confirmtake () {//仓库中心确定收货
            confirmdelivery(this.id,this.logisticsType).then(res=>{
            if (res.data.code == 'OK') {
                this.$message.success('收货成功!')
                this.getLogisticsCargoInfo(this.searchData)
            } else {
                this.$message.error(res.data.message)
            }
            })
        },
        addloginfo () {
            this.updatePrinterList()
            this.loginfo();
        },
        loginfo () {
            var data = {
              orderId : this.id,
              categoryNameAndProductName : this.categoryNameAndProductName
            }
            this.src = "http://132.232.122.151:10300/admin/api/wms-center/wms-receive-note?orderId="+this.id+"&categoryNameAndProductName="+this.categoryNameAndProductName
            logInfo(data).then(res=>{
            if (res.data.code == 'OK') {
                // this.src = res.data.data.src;
                // console.log(this.src);
            } else {
                this.$message.error(res.data.message)
            }
            })

            // logInfo(data).then(res=>{
            // if (res.data.code == 'OK') {
            //     // this.src = res.data.data.src;
            //     // console.log(this.src);
            // } else {
            //     this.$message.error(res.data.message)
            // }
            // })

        },
        getLogisticsCargoInfo (id) {//通过物流单号查询物流货物信息
            this.loading = true;
            LogisticsCargoInfo (id).then(res=>{
                if (res.data.code == 'OK') {
                    if (res.data.data.logisticsType == 'A1') {
                        this.state = 1
                        this.btnst = '1'
                        setTimeout(()=>{
                            this.loading = false;
                        },1000)
                        this.orderId = res.data.data.data.orderId;
                        this.categoryNameAndProductName = res.data.data.data.productName;
                        this.id = res.data.data.data.orderId;
                        this.logisticsType = res.data.data.logisticsType
                        this.codeStatus=  'Y'
                    } else if (res.data.data.logisticsType == 'C1' ){
                      console.log(res);
                            this.state = 2;
                            this.btnst = '3'
                            this.orderId = ""
                            this.codeStatus=  'Y'
                            var temp = []
                            this.logisticsType = res.data.data.logisticsType;
                            this.yesNo =  res.data.data.yesNo;
                            this.id = res.data.data.awId;
                            this.list.tbody = res.data.data.data.map(item=>{
                                item.isLuxuries = item.isLuxuries == 'Y' ? '是' : '否';
                                item.isMobile = item.isMobile == 'Y' ? '是' : '否';
                                item.isHot = item.isHot == 'Y' ? '是' : '否';
                                item.consignType.split(',').map(val=>{
                                if (val == 'MEN_DIAN') {
                                    val = '门店'
                                    temp.push(val)
                                } else if (val == 'SHANG_MEN') {
                                    val = '上门'
                                    temp.push(val)
                                }
                                })
                                item.consignType = temp.join(',')
                                return item;
                            })
                    } else {
                      this.state = 3
                      this.dataList  = res.data.data.data.afterApplyId
                      // console.log(res);
                      this.logisticsType = res.data.data.logisticsType
                      this.btnst = '2'
                      this.yesNo =  res.data.data.yesNo;
                      this.id = res.data.data.afterApplyId;
                      this.codeStatus=  'N'
                    }
                } else {
                this.$message.error(res.data.message);
                }

            })
        },
        search () {
            if (this.searchData == '') {
            this.$message.error('请输入物流单号');
            return;
            }
            this.getLogisticsCargoInfo(this.searchData)
        },
        searchs () {
            if (this.searchData == '') {
            this.$message.error('请输入物流单号');
            return;
            }
            this.getLogisticsCargoInfo(this.searchData)
        },

        }
  }
</script>

<style scoped>
.imgbox{
  display: flex;
align-items: center;
justify-content: center;
}
.btn {
  margin-top: 10px;
}
.box {
  background-color: #fff;
  margin-top: 10px;
}
.search {
width: 100%;
background-color: #fff;
padding:20px;
box-sizing: border-box;
margin-top: 10px;
}
.input {
/* width: 300px; */
display: flex;
flex-wrap: wrap;
}
.el-input {
width: 300px;
}
.input p {
margin-top: 10px;
}
label {
line-height: 40px;
color: #333;
margin: 0 10px;
}
#main .el-input {
width:400px;
height:20px;
}
.add {
margin-top: 10px;
padding-left: 14px;
}
.se {
margin-left: 20px;
}
.confirm {
position: absolute;
bottom: -1px;
right: 100px;
}
.region{
width:120px;
}
.content{
padding-left: 20px;padding-top:20px;
box-sizing: border-box;
}
.nodata {
  font-size: 20px;
  text-align: center;
  margin-top:50px;
  color: black;
}
</style>
